<template>
	<page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
	<view class="container">
		<view class="swiper-area">
			<swiper class="swiper" circular autoplay interval="3500" duration="1000"
				:style="{marginTop:statusBarHeight + 'px',height:200 + 'px'}">
				<swiper-item v-for="(item,index) in banners" :key="index">
					<view class="swiper-item-view">
						<image :src="item.url" mode="scaleToFill" class="banner-img"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="hot-near">
			<view class="header">
				<view class="headr-tip">
					附近
				</view>
			</view>
			<view class="shop-list">
				<shop-item v-for="shop in nearBys" :key="shop.id" :shop="shop" @onShareClick="shareClick"></shop-item>
			</view>
			<uni-load-more :status="status" />
		</view>
	</view>

	<uni-popup ref="sharePopup" type="bottom" :isMaskClick="false" :safe-area="false">
		<view class="share-area">
			<view class="share-content">
				<view class="share-item">
					<view><uni-icons type="weixin" size="40" color="#1aad19"></uni-icons></view>
					<view>分享到微信</view>
					<button open-type="share" class="share-btn">
	
					</button>
				</view>
			</view>
		</view>
		<view class="share-cancel-area">
			<button type="default" @click="cancelPop">取消</button>
		</view>
	</uni-popup>
</template>

<script>
	import {
		login,
		nearbyShops,
		getBanners,
		pingLogin
	} from '@/api/index/index'
	import {
		transform
	} from '@/minix/mixin.js'
	import config from '@/config.js'
	import {
		throttle
	} from '@/utils/reqUtil.js'
	export default {
		mixins: [transform],
		data() {
			return {
				show: false,
				// 轮播图
				banners: [],

				nearBys: [],

				status: 'more',
				current: 1,
				totalPage: 0,
				statusBarHeight: 0,
				loc: {
					lng: 108.9487888,
					lat: 34.2225966
				},
				shareShop: {}
			}
		},
		onLoad(option) {
			this.statusBarHeight = getApp().globalData.statusBarHeight
			this.init();
		},
		onPullDownRefresh() {
			this.nearBys = []
			this.init()
		},
		onReachBottom() {
			if (this.status === 'noMore') {
				return
			}
			throttle(() => {
				this.current++
				this.getNearbyShopsNoCate()
			})()
		},
		onShareAppMessage(res) {
			let reqObject = {
				title: config.appInfo.name,
				path: '/pages/index/index',
				imageUrl: '/static/logo.png',
			}
			if (res.from == 'button') {
				let shopId = this.shareShop.id
				reqObject.title = this.shareShop.shopName
				const user = uni.getStorageSync("userinfo")
				reqObject.path = `/pages/shopInfo/shopInfo?shopId=${shopId}&promoter=${user.id}`
				reqObject.imageUrl = this.shareShop.shareUrl || this.shareShop.logoUrl
			}
			this.$refs.sharePopup.close();
			this.show = false;
			return reqObject
		},
		methods: {
			init() {
				// 测试登录信息
				pingLogin().then((res) => {
					if (!res) {
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								login({
									code: loginRes.code
								})
							}
						})
					}
				})
				// this.getLocation()
				this.getNearByBanners()
				this.getNearbyShopsNoCate()
			},
			getNearByBanners() {
				getBanners(this.loc).then((res) => {
					this.banners = res
				})
			},
			
			getNearbyShopsNoCate() {
				this.status = 'loading'
				nearbyShops({
					loc: this.loc,
					current: this.current || 1
				}).then((res) => {
					if (this.current == 1) {
						this.totalPage = res.totalPage
					}
					if (this.totalPage <= this.current) {
						this.status = 'noMore'
					} else {
						this.status = 'more'
					}
					if (res.list.length > 0) {
						this.nearBys.push(...res.list)
					}
				}).catch((res) => {
					this.status = 'noMore'
				}).finally(() => {
					uni.stopPullDownRefresh()
				})
			},
			selectGrid(e) {
				const cate = this.categoryList[e.detail.index]
				uni.navigateTo({
					url: '/pages/cateShops/cateShops?cate=' + encodeURIComponent(JSON.stringify({
						"cateId": cate.id,
						"cateName": cate.text
					}))
				})
			},
			// async getLocation() {
			// 	uni.authorize({
			// 		scope: 'scope.userLocation',
			// 		success: () => {
			// 			this.getCurrentLocation()
			// 		},
			// 		fail: async () => {
			// 			const res = await uni.getSetting()
			// 			const auth = res[1].authSetting
			// 			if (!auth['scope.userLocation']) {
			// 				const r = await uni.showModal({
			// 					title: '请您授权小程序可以获取位置信息',
			// 					confirmText: '授权',
			// 				})
			// 				if (r[1].confirm) {
			// 					const re = await uni.openSetting()
			// 					const au = re[1].authSetting
			// 					if (!au['scope.userLocation']) {
			// 						uni.showToast({
			// 							icon: 'none',
			// 							title: '获取位置信息权限失败'
			// 						})
			// 					}
			// 				}
			// 			}
			// 			this.getCurrentLocation()
			// 		}
			// 	})
			// },
			// getCurrentLocation() {
			// 	let _this = this
			// 	uni.getLocation({
			// 		type: 'wgs84',
			// 		success: function(res) {
			// 			_this.loc = {
			// 				lng: res.longitude,
			// 				lat: res.latitude
			// 			}
			// 			uni.setStorageSync("loc", _this.loc)
			// 		},
			// 		fail: (res) => {
			// 			uni.showToast({
			// 				icon: 'none',
			// 				title: '获取位置信息失败'
			// 			})
			// 		},
			// 		complete: () => {
			// 			_this.getNearByBanners()
			// 			// _this.getNearByHotMalls()
			// 			_this.getNearbyShopsNoCate()
			// 		}
			// 	})
			// },
			shareClick(shop) {
				this.shareShop = shop;
				this.show = true;
				this.$refs.sharePopup.open();
			},
			cancelPop() {
				this.show = false;
				this.$refs.sharePopup.close();
			},
			async saveImg() {
				const res = await uni.getSetting()
				const auth = res[1].authSetting
				if (auth['scope.writePhotosAlbum']) {
					this.beginDownloadCode()
				} else {
					const r = await uni.showModal({
						title: '下载图片需要您开启保存到相册权限',
						confirmText: '授权',
					})
					if (r[1].confirm) {
						const re = await uni.openSetting()
						const au = re[1].authSetting
						if (au['scope.writePhotosAlbum']) {
							this.beginDownloadCode()
						} else {
							uni.showToast({
								icon: 'none',
								title: '保存到相册功能未开启'
							})
							this.show = false;
							this.$refs.sharePopup.close();
						}
					}
				}
			},
			saveFile() {
				uni.showLoading({
					mask: true,
					title: '正在下载图片'
				})
				uni.downloadFile({
					url: this.shareShop.fliersUrl,
					timeout: 3000,
					success: (res) => {
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success() {
								uni.showToast({
									icon: 'none',
									title: '下载成功，请在相册中查看'
								})
							}
						})
					},
					complete: () => {
						uni.hideLoading()
						this.show = false;
						this.$refs.sharePopup.close();
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner-img {
		width: 100%;
		height: 400rpx;
	}

	.cate-area {
		background-color: #fff;
		width: 95%;
		padding-top: 10px;
		margin: 0 auto;
		border-radius: 5px;

		.cate-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			font-size: 13px;

			image {
				width: 40px;
				height: 40px;
			}
		}
	}

	.hot-business {
		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		}

		.headr-tip {
			color: #f57b1d;
			font-size: 14px;
			font-weight: bold;
		}

		.header-more {
			font-size: 14px;
		}
	}

	.hot-near {
		padding-bottom: 10px;

		.header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;
		}

		.headr-tip {
			color: #f57b1d;
			font-size: 14px;
			font-weight: bold;
		}

		.header-more {
			font-size: 14px;
		}
	}

	.scroll-view_H {
		padding: 10px;
		background-color: #fff;

		.item-H {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
		}

		.hot-mall-item {
			color: #fff;
			font-size: 14px;
			font-weight: bold;
			margin-right: 5px;
		}

		.hot-mall-img {
			width: 200rpx;
			height: 260rpx;
			border-radius: 10px;
		}

		.hot-mall-intro {
			background-color: rgba(128, 128, 128, 0.5);
			border-radius: 10px;
			padding: 5px;
			width: 100%;
			margin-top: -46px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			position: relative;
		}

		.hot-mall-pv {
			font-size: 12px;
			font-weight: normal;
		}


	}
.share-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #fff;
		padding: 10px;
		border-radius: 10px 10px 0 0;
	}

	.share-content {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-bottom: 10px;
		width: 100%;
	}

	.share-item {
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;
	}

	.share-btn {
		width: 80px;
		height: 60px;
		position: relative;
		background: none;
		margin-top: -60px;

		&::after {
			border: none;
		}
	}

	.share-cancel-area {
		width: 100%;
	}
</style>